---
title: Alert
description: Displays a callout for user attention.
links:
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/feedback/alert.mdx?plain=1
---

<ComponentPreview
  name="alert/demos/default"
  preview={`<Alert>You can add components to your app using the cli.</Alert>`}
  fullWidth
  resizable
/>

## Installation

```package-install
npx shadcn@latest add @dotui/alert
```

## Examples

### Variants

Use the `variant` prop to change the visual style of the alert.

<ComponentPreview
  name="alert/demos/variants"
  preview={`<Alert variant="neutral" title="This is a neutral alert" />
<Alert variant="info" title="This is a neutral alert" />
<Alert variant="danger" title="This is a critical alert" />
<Alert variant="warning" title="This is a warning alert" />
<Alert variant="success" title="This is a success alert" />`}
  fullWidth
  resizable
/>

### Title

Use the `title` prop to add a title to the alert.

<ComponentPreview
  name="alert/demos/title"
  preview={`<Alert variant="warning" fill title="Your account has been suspended." />`}
  fullWidth
  resizable
/>

### Content

Pass children to the alert to add content.

<ComponentPreview
  name="alert/demos/content"
  preview={`<Alert title="Payment Information">
    Enter your payment method to complete your purchase.
  </Alert>`}
  fullWidth
  resizable
/>

### Custom icon

Use the `icon` prop to add a custom icon to the alert. An explicit `null` value can be used to remove the default icon.

<ComponentPreview
  name="alert/demos/custom-icon"
  preview={`<Alert icon={<GlobeIcon />}>Hello world!</Alert>`}
  fullWidth
  resizable
/>

### Action

Use the `action` prop to add an action to the alert.

<ComponentPreview
  name="alert/demos/action"
  preview={`<Alert
    action={<Button>Upgrade</Button>}
  >
    You are currently on the free plan. Upgrade to unlock more features.
  </Alert>`}
/>

## Examples

### Composition

If you need to customize things further, you can drop down the composition pattern.

<ComponentPreview
  name="alert/demos/composition"
  preview={`<AlertRoot>
    <WalletIcon />
    <div className="flex-1">
      <AlertTitle>Payment Information</AlertTitle>
      <AlertContent>
        Enter your payment method to complete your purchase.
      </AlertContent>
    </div>
    <Button variant="primary" size="sm">
      Upgrade
    </Button>
  </AlertRoot>`}
/>

## API Reference

Alert accepts all HTML `div` element props and the following:

| Prop      | Type                                                         | Default     | Description                                |
| --------- | ------------------------------------------------------------ | ----------- | ------------------------------------------ |
| `variant` | `'default' \| 'success' \| 'warning' \| 'danger' \| 'info' ` | `'default'` | The visual style of the alert.             |
| `fill`    | `boolean`                                                    | `false`     | Weather the visual style should be filled. |
